<template>
    <div class="container">
        <header>每日数据详情</header>
        <div class="table">
            <el-table
                    :data="tableData"
                    border
                    align="center"
                    header-align="center"
                    width="100%"
                    style="text-align: center;"
                    tooltip-effect="dark">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="day"
                        label="日期">
                </el-table-column>
                <el-table-column
                        prop="pv"
                        label="页面点击次数（pv）">
                </el-table-column>
                <el-table-column
                        prop="uv"
                        label="页面点击次数（uv）">
                </el-table-column>
                <el-table-column
                        prop="totalTimes"
                        label="活动参与次数">
                </el-table-column>
                <el-table-column
                        prop="totalPeople"
                        label="活动参与总人数"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="consumeScore"
                        label="消耗积分数"
                        width="150">
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <el-pagination @size-change="handleSizeChange"
                    :page-size="10"
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next, jumper"
                    :total=total>
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'DayData',
        data () {
            return {
                tableData: [],
                total: 0,
                searchForm: {
                    pageNum: 0,
                    pageSize: 10,
                    activityId: 0
                }
            }
        },
        mounted () {
          this.$nextTick(() => {
              this.searchForm.activityId = this.$route.query.activityId
              console.log(this.searchForm.activityId+'    --------------')
              this.getDataList()
          })
        },
        methods: {
            getDataList () {
                const _this =this;
                _this.axios({
                    url: '/activityConsole/data-statists/find-day-data',
                    params: _this.searchForm
                }).then(res => {
                    console.log(res)
                    if (res.data.status == 200) {
                        _this.tableData = res.data.data
                        _this.total = parseInt(res.data.description);
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            handleCurrentChange (val) {
                this.searchForm.pageNum = parseInt(val) - 1;
                this.getDataList()
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`)
            }
        }
    }
</script>
<style scoped>
    header {
        margin-bottom: 10px;
    }
    .footer {
        margin-top: 10px;
        text-align: center;
    }
</style>
